<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<title>Insert title here</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/common/jquery-1.8.2.min.js"></script>
<jsp:include page="/common/bootstrap.jsp"></jsp:include>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/common/bootstrap/css/bootstrap.css"
	type="text/css"></link>
  <script type="text/javascript" src="<%=request.getContextPath() %>/common/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
		var json ;
		$(function(){
			$.ajax({
				type:"post",
				url:"<%=request.getContextPath()%>/user/getItems.do",
					dataType : "json",
					success : function(data) {
						json = data;
						var count = 0;
						$.map(data,function(obj) {
								count++;
								var status = "";
								if(obj.ispublic==1){
									status="公开";
								}else{
									status="不公开";
								}
								var date = new Date(obj.startdate);
								var start = date.getFullYear()
										+ "/"
										+ (date.getMonth() + 1)
										+ "/" + date.getDay();
								var date = new Date(obj.enddate);
								var end = date.getFullYear() + "/"
										+ (date.getMonth() + 1)
										+ "/" + date.getDay();
								$("#tbox").append(
												"<tr> <td>"
														+ count
														+ "</td> <td>"
														+ obj.itemname
														+ "</td> <td>"
														+ start
														+ "</td> <td>"
														+ end
														+ "</td><td>"+status+"</td> <td> <a  class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal'onclick='showContent("
														+ obj.id
														+ ")'>详情</a> &nbsp; &nbsp; &nbsp; &nbsp;<a  class='btn btn-warning btn-lg' onclick='changeStatus("+obj.id+","+obj.ispublic+")'>切换状态</a></td> </tr>");
							});
					}
				})
				
				
				$("#saveBut").bind("click",function(){
					var data = $("#itemForm").serialize();
					$.ajax({
						type:"post",
						url:"<%=request.getContextPath()%>/user/addItem.do",
						data:data,
						success:function(){
							alert("添加成功");
							location.reload();
						}
					});
				});
	});

	function showContent(id) {
		$.map(json, function(obj) {
			if (obj.id == id) {
				$("#content").empty();
				$("#tit").remove();
				$("#header").append(
						'<h5 class="modal-title" id="tit" id="myModalLabel" id="tit">'
								+ obj.itemname + '</h5>');
				$("#content").append("<h6>项目描述：</h6>");
				$("#content").append(obj.itemcontent);
				$("#content").append("<hr/><h6>责任描述：</h6>");
				$("#content").append(obj.itemduty);
			}
		});
	}
	
	function changeStatus(id,ispublic){
		if(ispublic==0){
			ispublic=1
		}else{
			ispublic=0;
		}
		$.ajax({
				type:"post",
				url:"<%=request.getContextPath()%>/user/updateItem.do",
				data:{id:id,ispublic:ispublic},
				success:function(){
					location.reload();
				}
			});
	}
</script>
</head>
<body>
	<div class="container">
		<h1>个人项目展示 <small>点击详情看更多信息</small></h1>
		<a class='btn btn-success' data-toggle='modal'
			data-target='#myForm'>新增</a>
			<hr>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>编号</th>
					<th>项目名称</th>
					<th>起始时间</th>
					<th>结束时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbox">
			</tbody>
		</table>

		<!-- Modal -->
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header" id='header'>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body" id="content"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="myForm" tabindex="-1" role="dialog" 
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header" id='header'>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增项目</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="itemForm">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="input01">项目名称</label>
								<div class="controls">
									<input type="text" class="form-control" id="input01" name="itemname" placeholder="字母，数字，汉字皆可">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea01">项目描述</label>
								<div class="controls">
									<textarea class="form-control" rows="2" id="textarea01" name="itemcontent" placeholder="描述项目的业务流程"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea02">个人职责</label>
								<div class="controls">
									<textarea class="form-control" rows="2" id="textarea02" name="itemduty" placeholder="描述自己在项目中负责的功能"></textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="datetime">起止时间</label>
								<div class="controls">
									开始于：<input id="starttime" class="input-xlarge" name="startdate" data-options="required:true" type="text"  onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endtime\')}',dateFmt:'yyyy-MM-dd'})">
									结束于：<input id="endtime"  class="input-xlarge" name="enddate" type="text" data-options="required:true"  onfocus="WdatePicker({minDate:'#F{$dp.$D(\'starttime\')}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'})">
								</div>
							</div>
								<div class="control-group">
								<label class="control-label" for="ispublic">是否公开</label>
									<input type="checkbox" name="ispublic" value="1"/>
							</div>
						</fieldset>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal" id="saveBut">Save</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>